<template>
  <div class="functionShow">
    <div v-for="item in functionList" :key="item.id">
      <div class="container c_flex c_justify_between" v-if="pageNum == item.id">
        <img :src="item.image" alt="" />
        <div class="text">
          <div class="title1">{{ item.title }}</div>
          <div class="title2">{{ item.content }}</div>
          <div class="right">
            <div @click="preiousPage(item.id)">上一页</div>
            <div @click="backPage(item.id)">下一页</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "functionShow",
  data() {
    return {
      pageNum: 1,
      functionList: [
        {
          id: 1,
          image: "../../assets/images/makeFriend.png",
          title: "首页交友,个播,派对",
          content: "",
        },
        {
          id: 2,
          image: "../../assets/images/circle.png",
          title: "圈子动态",
          content: "",
        },
        {
          id: 3,
          image: "../../assets/images/message.png",
          title: "多样消息",
          content: "和喜欢的人一起聊天吧",
        },
        {
          id: 4,
          image: "../../assets/images/makefriend1.png",
          title: "进房连麦",
          content: "一起愉快的交友聊天吧",
        },
      ],
    };
  },
  methods: {
    preiousPage() {
      if (this.pageNum == 1) {
        this.pageNum = 4;
      } else {
        this.pageNum--;
      }
    },
    backPage() {
      if (this.pageNum == 4) {
        this.pageNum = 1;
      } else {
        this.pageNum++;
      }
    },
  },
};
</script>
  
  <style lang="scss">
.functionShow {
  // background: skyblue;
  width: 40vw;
  .container {
    // background: #fff;
    img {
      width: auto;
      height: 80vh;
      border-radius: 20rem;
    }
    .text {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      margin-top: 200rem;
      .title1 {
        font-size: 40rem;
        font-family: "华文彩云";
        color: #fff;
      }
      .title2 {
        font-size: 30rem;
        font-family: "华文琥珀";
        color: #fff;
        line-height: 60rem;
      }
    }
  }
  .right {
    div {
      height: 48rem;
      line-height: 48rem;
      padding: 0 14rem;
      border-radius: 9rem;
      color: #fff;
      font-family: "华文琥珀";
      margin-right: 10rem;
      font-size: 20rem;
      /* transform: scale(0.8); */
    }
    div:hover {
      font-size: 24rem;
      font-family: "华文彩云";
      background: #16825d;
      cursor: pointer;
      transition: all 0.5s;
    }
  }
}
// .functionShow{
//     .container{

//     }
//     img{
//         width: auto;
//         height: 800rem;
//     }
// }
</style>